<template>
    <div>
         <!-- 面包屑导航区域 -->
        <div class="bread_box">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>评论管理</el-breadcrumb-item>
                <el-breadcrumb-item>评论列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <!-- 卡片视图区域 -->
        <el-card>
            <!-- 搜索与添加区域 -->
            <el-form class="search_from" size="small" inline="true" label-width="70px">
                <el-form-item label="文章名称">
                    <el-input placeholder="请输入文章名称"></el-input>
                </el-form-item>

                <el-form-item label="昵称">
                    <el-input placeholder="请输入昵称"></el-input>
                </el-form-item>

                <el-form-item label="评论时间">
                    <el-date-picker
                        type="daterange"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
                    <el-button  icon="el-icon-refresh" size="mini">重置</el-button>
                </el-form-item>

            </el-form>

            <div>
                <el-button type="primary" icon="el-icon-plus" size="mini">新增</el-button>
                <el-button type="success" icon="el-icon-edit" size="mini">修改</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                <el-button type="warning" icon="el-icon-download" size="mini">导出</el-button>
            </div>

            <el-table
                ref="multipleTable"
                :data="commentList"
                tooltip-effect="dark"
                style="width: 100%"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}"
                >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="expand" label="详细">
                    <template slot-scope="scope">
                        <!-- {{scope.row.list}} -->
                        <span><strong>子评论详细</strong></span>
                        <el-table :data="scope.row.list" tooltip-effect="dark" style="width: 100%"
                            :header-cell-style="{'text-align':'center'}"
                            :cell-style="{'text-align':'center'}">
                                <el-table-column width="40px"></el-table-column>
                                <el-table-column type="index" label="序号" ></el-table-column>
                                <el-table-column prop="fromName" label="回复人" ></el-table-column>
                                <el-table-column prop="ip" label="主机"> </el-table-column>
                                <el-table-column prop="content" label="回复内容" :show-overflow-tooltip="true"> </el-table-column>
                                <el-table-column prop="likes" label="点赞"> </el-table-column>
                                <el-table-column prop="created" label="回复时间"></el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column prop="comment.author" label="昵称" ></el-table-column>
                <el-table-column prop="comment.ip" label="主机"> </el-table-column>
                <el-table-column prop="articleName" label="文章名称"> </el-table-column>
                <el-table-column label="显示">
                    <template slot-scope="">
                        <!-- {{scope.row}} -->
                        <el-switch v-model="value">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="comment.content" label="评论内容" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="comment.likes" label="点赞"> </el-table-column>
                <el-table-column prop="comment.created" label="评论时间"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="showDetail(scope.row)"><i class="el-icon-view"></i><span>详情</span></el-button>
                        <el-button type="text" size="mini"><i class="el-icon-edit"></i><span>修改</span></el-button>
                        <el-button type="text" size="mini"><i class="el-icon-delete"></i><span>删除</span></el-button>
                    </template>
                </el-table-column>
            </el-table>

             <!-- 分页区域 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.cur"
                :page-sizes="[4, 8, 10, 20]"
                :page-size="pageInfo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background>
            </el-pagination>

        </el-card>

        <!-- 评论详情Dialog -->
        <el-dialog title="评论详细" :visible.sync="detailDialogVisible">
            <el-form label-width="100px" :model="commentDetailForm" class="commentDetailForm">
                <el-row>
                    <el-col :span=12>
                        <el-form-item label="IP：" >{{commentDetailForm.ip}}</el-form-item>
                        <el-form-item label="昵称：" >{{commentDetailForm.author}}</el-form-item>
                        <el-form-item label="OS：" >Windows 10</el-form-item>
                        <el-form-item label="浏览器：" >Chrome 8</el-form-item>
                        <el-form-item label="评论URL：" >https://www.yidiandian.com/</el-form-item>
                    </el-col>
                    <el-col :span=12>
                        <el-form-item label="点赞：" >{{commentDetailForm.likes}}</el-form-item>
                        <el-form-item label="显示：" >
                            <template>
                                <el-switch v-model="detailDialogVisible">
                                </el-switch>
                            </template>
                        </el-form-item>
                        <el-form-item label="评论文章：" >{{commentDetailForm.articleName}}</el-form-item>
                        <el-form-item label="评论时间：" >{{commentDetailForm.created}}</el-form-item>
                        <el-form-item label="评论内容：" >{{commentDetailForm.content}}</el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="detailDialogVisible = false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  data () {
    return {
      // 获取评论列表参数
      pageInfo: {
        cur: 1,
        size: 4
      },
      total: 0,
      // 评论列表
      commentList: [],
      // 文章详情Dialog
      detailDialogVisible: false,
      // 文章详情表单
      commentDetailForm: {
        author: '',
        ip: '',
        likes: 0,
        articleName: '',
        created: '',
        content: ''
      },
      // 暂时绑定switch
      value: ''
    }
  },
  methods: {
    // 获取评论列表
    async getCommentList () {
      const { data: res } = await this.$http.get('/comment/commentPageAdmin', { params: this.pageInfo })
      console.log('获取评论列表', res)
      if (res.code !== 200) return
      this.commentList = res.data.list
      this.total = res.data.total
    },
    // 监听 size 改变的事件
    handleSizeChange (newSize) {
    //   console.log(newSize)
      this.pageInfo.size = newSize
      this.getCommentList()
    },
    // 监听 cur 页码值 改变的事件
    handleCurrentChange (newCur) {
    //   console.log(newCur)
      this.pageInfo.cur = newCur
      this.getCommentList()
    },
    // 打开文章详情Dialog
    showDetail (info) {
      this.detailDialogVisible = true
      this.commentDetailForm.author = info.comment.author
      this.commentDetailForm.ip = info.comment.ip
      this.commentDetailForm.likes = info.comment.likes
      this.commentDetailForm.articleName = info.articleName
      this.commentDetailForm.created = info.comment.created
      this.commentDetailForm.content = info.comment.content
    }
  },
  created () {
    this.getCommentList()
  }
}
</script>

<style lang="less" scoped>

</style>

<style lang="less">
    .commentDetailForm{
        // 改变el-form的label
        .el-form-item{
            .el-form-item__label{
                font-weight: 700 !important;
                line-height: 24px !important;
            }
            .el-form-item__content{
                line-height: 24px !important;
            }
        }
    }
</style>
